<template>
  <div>
    <!-- 变更方法push()
pop()
shift()
unshift()
splice()
sort()
reverse()  这几个方法可以改变原数组，不能用不能改变原数组的方法，如果要用，可以替换。-->
    <h4>电影列表</h4>
    <ul>
      <li v-for="item in movies" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <input type="text" v-model="newMovie" />
    <button @click="addMovie">添加电影到后面</button>
    <button @click="addMovie2">添加电影到前面</button>
    <button @click="removeMovie">删除后面电影</button>
    <button @click="removeMovie2">删除前面电影</button>
    <button @click="spliceMovie">splice插入电影</button>
    <button @click="sortMovie">sort排序操作电影</button>
    <button @click="reverseMovie">reverse反转数组操作电影</button>
    <button @click="filterMovie">filter数组替换数组电影</button>
    <hr />
    <h4>当你利用索引直接设置一个项时,数组无效</h4>
    <button @click="setMovie">索引直接设置</button>
    <h4>当你修改数组的长度时,无效</h4>
    <button @click="setMovie2">修改数组的长度</button>
    <hr />
    <h4>
      vue的definePrototype（访问器属性）原因，初始时就在data里面的数据会受到监听，但是当我们给响应式的对象新增属性的时候，新增的属性并不会显示到页面中；同样对于响应式的数组，增加元素、修改数组长度时，数组的变化也不会展示在页面上。
    </h4>
    <div>名字：{{ person.name }}</div>
    <div>年龄：{{ person.age }}</div>
    <button @click="addProperty">新增年龄</button>
  </div>
</template>

<!-- <script>
export default {
  name: 'arrcheck',
  data() {
    return {
      newMovie: '',
      movies: [
        { id: 2, name: '盗梦空间' },
        { id: 1, name: '星际穿越' },
        { id: 4, name: '教父' },
        { id: 5, name: '龙猫' },
        { id: 6, name: '泰坦尼克号' },
        { id: 3, name: '大话西游' }
      ],
      person: {
        name: '张三'
      }
    }
  },
  methods: {
    addMovie() {
      if (this.newMovie == '') {
        alert('请输入电影名')
        return
      }
      this.movies.push({ id: this.movies.length + 1 + Date.now(), name: this.newMovie })
      this.newMovie = ''
    },
    addMovie2() {
      if (this.newMovie == '') {
        alert('请输入电影名')
        return
      }
      this.movies.unshift({ id: this.movies.length + 1 + Date.now(), name: this.newMovie })
      this.newMovie = ''
    },
    removeMovie() {
      this.movies.pop()
    },
    removeMovie2() {
      this.movies.shift()
    },
    spliceMovie() {
      this.movies.splice(1, 0, { id: this.movies.length + 1 + Date.now(), name: '速度与激情' })
    },
    sortMovie() {
      this.movies.sort((a, b) => {
        return a.id - b.id
      })
    },
    reverseMovie() {
      this.movies.reverse()
    },
    // 不能改变原数组的方法，只能返回一个新数组，替换
    filterMovie() {
      this.movies = this.movies.filter((movie) => movie.id % 2 === 0)
    },
    // 当你利用索引直接设置一个项时,vue2检测不到数组变动,vue3可以
    setMovie() {
      this.movies[0] = { id: this.movies.length + 1 + Date.now(), name: '少林小子' }
    },
    // 当你直接修改数组的长度时，vue2检测不到数组变动，vue3可以
    setMovie2() {
      this.movies.length = 1
    },
    // vue2向响应式对象中添加一个新的属性，没响应。vue3可以
    addProperty() {
      this.person.age = 30
    }
  }
}
</script>
 -->
<script setup>
defineOptions({
  name: 'arrcheck'
})
import { ref, reactive } from 'vue'
const newMovie = ref('')
let movies = reactive([
  { id: 2, name: '盗梦空间' },
  { id: 1, name: '星际穿越' },
  { id: 4, name: '教父' },
  { id: 5, name: '龙猫' },
  { id: 6, name: '泰坦尼克号' },
  { id: 3, name: '大话西游' }
])
const person = reactive({
  name: '张三'
})
function addMovie() {
  if (newMovie.value == '') {
    alert('请输入电影名')
    return
  }

  movies.push({ id: movies.length + 1 + Date.now(), name: newMovie.value })
  newMovie.value = ''
}
function addMovie2() {
  if (newMovie.value == '') {
    alert('请输入电影名')
    return
  }
  movies.unshift({ id: movies.length + 1 + Date.now(), name: newMovie.value })
  newMovie.value = ''
}
function removeMovie() {
  movies.pop()
}
function removeMovie2() {
  movies.shift()
}
function spliceMovie() {
  movies.splice(1, 0, { id: movies.length + 1 + Date.now(), name: '速度与激情' })
}
function sortMovie() {
  movies.sort((a, b) => {
    return a.id - b.id
  })
}
function reverseMovie() {
  movies.reverse()
}
// 不能改变原数组的方法，只能返回一个新数组，替换
function filterMovie() {
  let filterMovies = movies.filter((movie) => {
    console.log('movie: ', movie)
    return movie.id % 2 === 0
  })
  console.log('filterMovies: ', filterMovies)
  movies.length = 0
  movies = Object.assign(movies, filterMovies)
  console.log('movies: ', movies)
}
// 当你利用索引直接设置一个项时,vue2检测不到数组变动,vue3可以
function setMovie() {
  movies[0] = { id: movies.length + 1 + Date.now(), name: '少林小子' }
}
// 当你直接修改数组的长度时，vue2检测不到数组变动，vue3可以
function setMovie2() {
  movies.length = 1
}
// vue2向响应式对象中添加一个新的属性，没响应。vue3可以
function addProperty() {
  person.age = 30
}
</script>
